<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	
img{
	width: 300px;
	height: 300px;
}
#dog{
	margin-right: 100px;
}
#cat{
	margin-left: 50px;
}


div{
	width: 300px;
	height: 150px;

}
#box1{
	background: green;
	margin-bottom: 100px;
}
#box2{
	background: purple;
	margin-top: 150px;
}
</style>
</head>

<body>

<!-- 左右外边距会累加，上下外边距会合并 -->
<!-- div#box$*2 -->
<div id="box1"></div>
<div id="box2"></div>


<img src="dog.jpg" id="dog" /><img src="cat.jpg" id="cat" />






</body>
</html>
